<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>引出生命周期</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        生命周期:
            1.又名:生命周期回调函数、生命周期函数、生命周期钩子。
            2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。
            3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
            4.生命周期函数中的this指向是vm或组件实例对象。 
    -->

    <div id="app">
        <h2 v-bind:style="{opacity}">欢迎学习Vue</h2>
    </div>
    <script>
    //配置完全局配置之后再创建Vue实例,关闭Vue的生产提示标识
     Vue.config.productionTip = false;
        var vm = new Vue({
           el:'#app',
           data:{
                opacity: 1
           },
           methods:{},

           //挂载(钩子函数/生命周期函数)：Vue完成模板解析，并将初始的真实DOM元素放入页面后(挂载完毕)调用mounted
           mounted() {
               console.log('mounted');
               setInterval(() => {
                   this.opacity-=0.01;
                   if (this.opacity<=0) {
                       this.opacity=1;
                   }
               }, 16);
           },
        });

        //通过外部的定时器实现(不推荐)
        // setInterval(() => {
        //     vm.opacity-=0.01;
        //     if (vm.opacity<=0) {
        //         vm.opacity=1;
        //     }
        // }, 16);
    </script>
</body>

</html>